<template>
	<view >
		<view class="fw-b ft_18 navbar">
			购物车
		</view>
		<view class="content">
			<view class="Notyet fw-b ft_14" v-if="shopList.length<=0">
				购物车暂无商品，快去添加商品吧~
			</view>
			<view v-for="(item,index) in shopList" class="display mb-20 shopinfo" :key="index">
				<u-checkbox v-model="item.checked" shape="circle" active-color="#f38a13" @change="checkboxChange(item)" :name="item.id"></u-checkbox>
				<view class="shopimg" @click.stop="shopDetail(item)">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				
				<view class="shoptext" @click.stop="shopDetail(item)">
					<view class="">
						<view class="fw-b text_hidden2" style="width: 90%;">{{item.name}}</view>
						<view class="ft_12 c-999 p_top_10">
							{{item.item_name}} ×{{item.num}}
						</view>
					</view>
					<view class="display just_space" style="">
						<view class="ft_14 fw-b" style="color: #F38613;">
							￥{{userInfo.role_type==0 ? item.price:userInfo.role_type==1 ? item.price1:userInfo.role_type==2?item.price2:item.price3}}
						</view>
						<u-number-box v-model="item.num" @minus="valChange(item)" @plus="valChange(item)" :min="1"></u-number-box>
					</view>
				</view>
				<u-icon name="trash" color="#999999" size="32" class="shanc" @click="shanc1(item)"></u-icon>
			</view>
		</view>
		
		<view class="" style="height: 100rpx;"></view>
		<view class="display just_space bottom_bar">
			<view class="display" style="padding-left: 15px;">
				<u-checkbox v-model="checked" shape="circle" active-color="#f38813" @change="checkedAll"></u-checkbox>
				<view class="">全选</view>
			</view>
			<view class="display">
				<view class="c">
					合计：
					<text class="ft_18 p_right_10 fw-b c-zhu">￥{{getPrice}}</text>
				</view>
				<view :class="jiesuan?'jiesuan':'nojies'" @click="go_jiesuan">结算</view>
			</view>
		</view>
		
		<!-- 确认删除弹窗 -->
		<u-modal v-model="show" :show-cancel-button="true" confirm-color="#ff7f1e" @confirm="shanc">
			<view class="" style="padding: 20px 0;text-align: center;">
				确认删除商品?
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:"" ,//用户id
				checked:false,
				shopList:[], //购物车数据
				shopnum:"",//加减数量
				
				zongjine:0,//总金额
				jiesuan:false, //是否可结算
				
				shancId:"", //删除id
				show:false, //确认删除弹窗
				
			}
		},
		computed:{
			getPrice(){ //计算总金额
				this.zongjine = 0
				this.shopList.forEach((item,i)=>{
					if(item.checked) {
						let user=this.userInfo.role_type
						let shopprice=Number(user==0 ? item.price : user==1 ? item.price1 : user==2 ? item.price2 :item.price3) //不同用户价格不同
						let number=item.num
						this.zongjine=Math.round((this.zongjine + (shopprice * number))*100)/100
					}
				})
				return this.zongjine
			}
		},
		onShow(){
			
			this.getcartList() //获取购物车数据
		},
		onLoad() {
			this.userInfo=this.$all.getData('userInfo') //获取用户信息
			console.log(this.userInfo);
		},
		methods: {
			getcartList(){ //获取购物车数据
				this.$myRequest('cart/index',{})
				.then(res=>{
					console.log(res.data.data);
					if(res.data.code==1){
						let data=res.data.data.list
						this.shopList=data
						this.shopList.forEach(i=>{
							i.item_name=i.item_name.replace(/;/g,' ')
						})
					}
				})
				this.checked=false
				this.jiesuan=false
			},
			
			valChange(e){ //步进器加减
				console.log(e);
				this.$myRequest('cart/edit_cart', {
					cart_id: e.cart_id,
					num:e.num, //修改的数量
				}).then(res => {
					console.log(res.data)
					if (res.data.code == 1) {
					}else{
						this.$all.toast(res.data.msg)
					}
				})
			},
			
			go_jiesuan(){ //点击结算  前往确认订单
				if(!this.jiesuan){
					this.$all.toast("请选择商品")
					return
				}
				let idlist = [];
				this.shopList.forEach(i => {
					if (i.checked) {
						idlist.push(i.cart_id);
					}
				});
				idlist=idlist.join(',')
				console.log(idlist);
				uni.navigateTo({
					url: `../../mine/pages/cart/cartOrder?idlist=${idlist}`
				})
			},
			shopDetail(item){ //跳转商品详情
				console.log(item);
				uni.navigateTo({
					url:"../shop/shopDetail?shopid="+item.goods_id
				})
			},
			checkboxChange(item){ //选择商品
				item.checked=!item.checked
				let store=true
				if (this.shopList.find(m => m.checked)) { 
					this.shopList.forEach((j) => {
						if(!j.checked) {
							store = false
						}else{
							this.jiesuan = true
						}
					});
					this.checked = store
				}else{
					this.checked = false
				}
				// this.isAll() //判断是否全选
			},
			checkedAll(e) {			// 全选
				this.checked = !this.checked //改变选择状态
				if(this.shopList.length>0){
					if (this.checked == true) {
						this.shopList.forEach((item, i) => {
							this.jiesuan = true //结算按钮可操作
							item.checked = true //选中状态
						})
					} else{
						this.shopList.forEach((item, i) => {
							item.checked = false
							this.jiesuan = false
						})
					}
				}
				
			},
			
			shanc1(item){ //删除
				console.log(item);
				this.show=true
				this.shancId=item.cart_id
			},
			shanc() { // 删除商品方法
				this.$myRequest('cart/edit_cart', {
					cart_id: this.shancId,
					num:0, //修改的数量 为0是删除
				}).then(res => {
					console.log(res.data)
					this.$all.toast(res.data.msg)
					if (res.data.code == 1) {
						this.show = false //关闭删除弹框
						this.getcartList() //删除完重新加载页面
					}
				})
			},
			
			
			bianji() { //点击管理商品（暂不用）
				this.edit = !this.edit
				if (this.edit == true) {
					this.wancheng = '完成'
				} else {
					this.wancheng = '编辑'
				}
			},
			shanchu() { //多选删除（暂不用）
				this.idStr = [];
				this.storeList.forEach(i => {
					if (i.goods[0].find(m => m.checked)) {
						i.goods[0].forEach((j,index) => {
							if (j.checked) {
								this.idStr.push(j.card_id) //购物车对象id  用于删除商品
							}
						});
					}
				});
				console.log(this.idStr);
				// 删除商品
				this.xuanzesc()
			},
			getprice(){  //监听金额变化  方法监听只适用于app
				let price = 0
				this.shopList.forEach((item,i)=>{
					if(item.checked) {
						let shopprice=Number(item.price_selling)
						let number=item.number
						// price = Math.round((price + (Number(item.price_selling) * item.number))*100)/100
						price=Math.round((price + (shopprice * number))*100)/100
						this.zongjine=price
					}
				})
				// console.log(price);
				return price
			},
			
			
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #fafafa;
	}
	.navbar{
		padding: 40px 15px 15px;background-color: #ffffff;
	}
	.content{
		padding: 10px 0;
		.Notyet{
			text-align: center;
			padding: 20px 0;
		}
		.shopinfo{
			position: relative;background-color: #FFFFFF;padding: 15px;
			.shopimg{
				width: 200rpx;height: 200rpx;margin-right: 10px;
				image{
					width: 200rpx;height: 200rpx;border-radius: 5px;
				}
			}
			.shoptext{
				display: flex;justify-content: space-between;flex-flow: column;height: 100px;
				width: 100%;
			}
			.shanc{
				width: 32rpx;height: 32rpx;position: absolute;top: 15px;right: 15px;
			}
		}
		
	}
	.bottom_bar{
		position: fixed;width: 750rpx;height: 100rpx;background-color: #F2F2F2;bottom: var(--window-bottom);
	}
	
	.jiesuan{
		width: 180rpx;
		height: 100rpx;
		text-align: center;
		color: #fff;
		line-height: 100rpx;
		background: linear-gradient(90deg, #F38313 0%, #F3A613 100%);
	}
	.nojies{
		width: 180rpx;
		height: 100rpx;
		text-align: center;
		color: #fff;
		line-height: 100rpx;
		background-color: #cccccc;
	}
	.quan-ac {
		width: 40rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #F38313 0%, #F3A613 100%);
		border: 2rpx solid transparent;
		border-radius: 50%;
		margin-right: 30rpx;

	}

	.quan {
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 2rpx solid #999999;
		border-radius: 50%;
		margin-right: 30rpx;
	}
</style>
